<template>
  <div class="sku">
    <button @click="show = true" class="skushow">基础用法</button>
    <van-sku
      v-model="show"
      stepper-title="我要买"
      :sku="sku"
      :properties="properties"
      :goods="goods"
      :goods-id="goodsId"
      :quota="quota"
      :quota-used="quotaUsed"
      :hide-stock="sku.hide_stock"
      @add-cart="onAddCartClicked"
    >
      <!-- 自定义 sku-header-price -->
      <!-- <template #sku-header-price="props">
        <div class="van-sku__goods-price">
          <span class="van-sku__price-symbol">￥</span
          ><span class="van-sku__price-num">{{ props.price }}</span>
        </div>
      </template> -->

      <!-- 自定义 sku actions -->
      <template #sku-actions="props">
        <div class="van-sku-actions">
          <!-- 直接触发 sku 内部事件，通过内部事件执行 onBuyClicked 回调 -->
          <van-button
            square
            size="large"
            type="primary"
            @click="props.skuEventBus.$emit('sku:buy')"
          >
            加入购物车
          </van-button>
        </div>
      </template>
    </van-sku>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
      goodsId: 1,
      quota: 20,
      quotaUsed: 1,
      sku: {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [
          {
            k: '糖度', // skuKeyName：规格类目名称
            k_s: 's1', // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            v: [
              {
                id: '1', // skuValueId：规格值 id
                name: '标准', // skuValueName：规格值名称
                // imgUrl: 'https://b.yzcdn.cn/vant/sku/shoes-3.png', // 规格类目图片，只有第一个规格类目可以定义图片
                // previewImgUrl: 'https://b.yzcdn.cn/vant/sku/shoes-3.png', // 用于预览显示的规格类目图片
              },
              {
                id: '2',
                name: '少甜',
                // imgUrl: 'https://img01.yzcdn.cn/2.jpg',
                // previewImgUrl: 'https://img01.yzcdn.cn/2.jpg',
              },
              {
                id: '3',
                name: '少少甜',
                // imgUrl: 'https://img01.yzcdn.cn/2.jpg',
                // previewImgUrl: 'https://img01.yzcdn.cn/2.jpg',
              },
              {
                id: '4',
                name: '不另外加糖',
              },
            ],
            // largeImageMode: false, //  是否展示大图模式
          },
          {
            k: '吸管', // skuKeyName：规格类目名称
            k_s: 's2', // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            v: [
              {
                id: '01', // skuValueId：规格值 id
                name: '环保吸管', // skuValueName：规格值名称
              },
              {
                id: '02',
                name: '纸吸管',
              },
              {
                id: '03',
                name: '塑料吸管',
              },
            ],
          },
        ],
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [
          {
            id: 1, // skuId
            s1: '1', // 规格类目 k_s 为 s1 的对应规格值 id
            s2: '01', // 规格类目 k_s 为 s2 的对应规格值 id
            price: 100, // 价格（单位分）
            stock_num: 110, // 当前 sku 组合对应的库存
          },
          {
            id: 2, // skuId
            s1: '1', // 规格类目 k_s 为 s1 的对应规格值 id
            s2: '02', // 规格类目 k_s 为 s2 的对应规格值 id
            price: 100, // 价格（单位分）
            stock_num: 110, // 当前 sku 组合对应的库存
          },
          {
            id: 3, // skuId
            s1: '1', // 规格类目 k_s 为 s1 的对应规格值 id
            s2: '03', // 规格类目 k_s 为 s2 的对应规格值 id
            price: 3200, // 价格（单位分）
            stock_num: 110, // 当前 sku 组合对应的库存
          },
          {
            id: 4, // skuId
            s1: '2', // 规格类目 k_s 为 s1 的对应规格值 id
            s2: '01', // 规格类目 k_s 为 s2 的对应规格值 id
            price: 100, // 价格（单位分）
            stock_num: 110, // 当前 sku 组合对应的库存
          },
          {
            id: 4, // skuId
            s1: '2', // 规格类目 k_s 为 s1 的对应规格值 id
            s2: '02', // 规格类目 k_s 为 s2 的对应规格值 id
            price: 100, // 价格（单位分）
            stock_num: 110, // 当前 sku 组合对应的库存
          },
        ],
        price: '32.00', // 默认价格（单位元）
        stock_num: 227, // 商品总库存
        collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
        none_sku: true, // 是否无规格商品
        hide_stock: true, // 是否隐藏剩余库存
      },
      properties: [
        {
          k_id: 1,
          k: '加料', // skuKeyName：规格类目名称
          is_multiple: true, //是否可以多选
          v: [
            {
              id: '001', // skuValueId：规格值 id
              name: '珍珠', // skuValueName：规格值名称
            },
            {
              id: '002',
              name: '椰果',
            },
            {
              id: '003',
              name: '补丁',
            },
          ],
        },
      ],
      goods: {
        // 默认商品 sku 缩略图
        picture: '/img/downloadFile/60.jpeg',
      },
    }
  },
  methods: {
    onAddCartClicked(e) {
      console.log(e)
    },
    onPointClicked(e) {
      console.log(e)
    },
  },
}
</script>

<style>
.skushow {
  width: 100%;
  height: 20vw;
  background-color: rgb(13, 189, 13);
  color: #fff;
  font-size: 1.1rem;
}
</style>
